import React, {Component} from 'react';
import './index.css';

export default class Item extends Component {
	state = {
		mouse: false,
	};

	// 鼠标事件
	handleMouse = flag => {
		return () => {
			this.setState({mouse: flag});
		};
	};

	// 点击勾选列表元素
	handleCheck = id => {
		return event => {
			this.props.updateTodo(id, event.target.checked);
		};
	};

	// 删除事件
	handleDeleteOne = id => {
		return () => {
			const {deleteOneTodo} = this.props;
			if (window.confirm("确定删除此事件?")) {
				deleteOneTodo(id);
			}
		};
	};

	render() {
		const {id, doName, done} = this.props;

		return (
			<li
				style={{backgroundColor: this.state.mouse ? '#ddd' : 'white'}}
				onMouseEnter={this.handleMouse(true)}
				onMouseLeave={this.handleMouse(false)}>
				<label>
					<input type="checkbox" checked={done} onChange={this.handleCheck(id)} />
					<span>{doName}</span>
				</label>
				<button
					onClick={this.handleDeleteOne(id)}
					className="btn btn-danger"
					style={{display: this.state.mouse ? 'block' : 'none'}}>
					删除
				</button>
			</li>
		);
	}
}
